<template>
  <div class="container">
    <div class="content_wrap display_flex align_items_flex_start">
      <div class="content display_flex justify_content_center align_items_center flex_wrap_wrap">
        <img src="@a/images/img404.png" class="img404" />
        <div class="tips">
          <h1>404</h1>
          <p>抱歉，你访问的页面不存在</p>
          <el-button @click="toHome" type="primary" round>
            返回首页
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { isProduction, isDynamicPermission } from '@/setting.js';
import { getTmpCache } from '@u/cache.js';

export default {
  name: 'FourToFour',
  methods: {
    toHome() {
      if (isProduction) {
        if (isDynamicPermission) {
          this.$router.replace('/');
        } else {
          if (getTmpCache('token')) {
            this.$router.replace('/');
          } else {
            this.$router.replace('/login');
          }
        }
      } else {
        this.$router.replace('/');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #f5f7f9;
  overflow: auto;
  .content_wrap {
      height: 100%;
    .content {
      width: 100%;
      margin: auto;
      .img404 {
        width: 30%;
        min-width: 300px;
        max-width: 430px;
        padding: 5%;
      }
      .tips {
        padding: 5%;
        h1 {
          color: #515a6e;
          font-weight: 600;
          font-size: 72px;
          line-height: 72px;
          margin: 0;
        }
        p {
          margin-bottom: 16px;
          color: #808695;
          font-size: 20px;
          line-height: 28px;
          margin: 20px 0;
        }
      }
    }
  }
}
</style>
